<template>
  <div class="price">
    <priceDetailBar :priceObj="priceObj"></priceDetailBar>

    <div class="box">
      <div class="show-p">
        <p class="p1">
          <span class="s1">Origin</span>
          <span class="s2">{{priceObj.origin}}</span>
        </p>
        <p class="p1">
          <span class="s1">Trend</span>
          <span class="s3" :class="priceObj.flag">{{priceObj.gain}}</span>
        </p>
      </div>
    </div>
    <div class="price-dom">
      <div>
        <p class="name" :class="priceObj.flag">{{priceObj.price}}</p>
        <p class="dw1">{{priceObj.unit}}</p>
      </div>
      <div>
        <p class="num">
          {{priceObj.oldPrice}}
          <span class="dw0">{{priceObj.unit}}</span>
        </p>
        <p class="rl">{{priceObj.inputdate}}</p>
      </div>
    </div>
    <div class="round">
      <table style="width: 100%;">
        <thead>
          <tr class="table-title">
            <td class="guige">Product</td>
            <td>Price</td>
            <td>+/-</td>
            <td>Type</td>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(i,index) in list"
            :key="index"
            class="router-link-bg table-item"
            :class="'table-item-'+i.flag"
            @click="getDtails(i)"
          >
            <td class="table-item-list guige">
              <p class="p1">{{i.kname}}</p>
              <p class="p2">{{i.inputdate}}</p>
            </td>
            <td class="table-item-list table-item-price">
              <p>{{i.price}}</p>
            </td>
            <td class="table-item-list table-item-status">
              <div class="status-but">{{i.gain}}</div>
            </td>
            <td class="table-item-list">
              <p>{{i.origin}}</p>
            </td>
          </tr>
        </tbody>
      </table>
      <nullDom v-if="nullDomShow" style="color:#697274"></nullDom>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import icondz from "../../assets/img/price/icondz.png";
import iconzr from "../../assets/img/price/iconzr.png";
import iconzt from "../../assets/img/price/iconzt.png";
import loginForm from "../../components/login/index";
import priceDetailBar from "../../components/nav/priceDetailBar";
import { getchannelpricedetail, getchannelpricelist } from "../../api/price.js";
import nullDom from '../../components/nulllist/nullList'
export default {
  components: {
    loginForm,
    priceDetailBar,
    nullDom
  },
  data() {
    return {
      iconzr,
      iconzt,

      icondz,
      checked: false,
      tardeNum: 0,
      priceObj: {},
      isLogin: false,
      list: [],
      nullDomShow:false
    };
  },
  methods: {
    getDtails(i) {
      console.log(i);
      this.$router.push({ path: "/priceQs", query: i });
    },
    showloginway() {
      this.showlogin = true;
    },
    getPrciobj() {
      let obj = {
        channel: this.$route.query.channel,
        id: this.$route.query.id
      };
      getchannelpricedetail(obj).then(res => {
        console.log("dange单挑", res);
        if (res.code == "0000" || res.code == "0009") {
          this.priceObj = res.data;
          if (this.priceObj.flag == "normal") {
            this.priceObj.gain = "--";
            this.priceObj.per = "--";
          } else if (this.priceObj.flag == "up") {
            this.priceObj.gain = "+" + this.priceObj.gain;
            this.priceObj.per = "+" + this.priceObj.per;
          }
          this.priceObj.cid = this.priceObj.catId;
        }
      });
    },
    getchannelpricelist() {
      let obj = {};
      obj.cid = this.$route.query.catId;
      obj.channel = this.$route.query.channel;
      getchannelpricelist(obj).then(res => {
       
        if (res.code == "0000" || res.code == "0009") {
          if (res.data.length<=0) {
          this.nullDomShow=true;
         }else{
          this.nullDomShow=false;
         }
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            if (element.flag == "normal") {
              element.gain = "--";
              element.per = "--";
            } else if (element.flag == "up") {
              element.gain = "+" + element.gain;
              element.per = "+" + element.per;
            }
          }
          this.list = res.data;
        }
      });
    }
  },
  created() {
    this.getPrciobj();
    this.getchannelpricelist();
  }
};
</script>
<style scoped lang="less">
.price {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
  color: rgba(255, 255, 255, 0.6);
}

.price-dom {
  line-height: 1.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0.3rem 0.5rem;
  background: #1f87e5;
}
.name {
  font-size: 0.45rem;
  color: #ffffff;
  padding-right: 0.6rem;
  background-repeat: no-repeat;
  background-position: 99% center;
  background-size: 0.36rem;
  &.normal {
    background-image: none;
  }
  &.up {
    background-image: url("../../assets/img/price/trend-up.png");
  }
  &.down {
    background-image: url("../../assets/img/price/trend-down.png");
  }
}
.num {
  font-size: 0.36rem;
  // font-weight: bolder;
  color: rgba(255, 255, 255, .8);
  
}
.dw0 {
  font-size: 0.26rem;
  color: rgba(255, 255, 255, 0.6);
}
.dw1 {
  font-size: 0.32rem;
  color: #ffffff;
}
.rl {
  font-size: 0.32rem;
  padding-right: 0.4rem;
  color: rgba(255, 255, 255, 0.6);
  background-image: url("../../assets/img/price/trendtim.png");
  background-repeat: no-repeat;
  background-position: 99% 34%;
  background-size: 0.28rem;
}
.box {
  width: 100%;
  background: rgba(31, 135, 229, 1);
  .show-p {
    display: flex;
    justify-content: space-between;
    font-size: 0.24rem;
    color: rgba(255, 255, 255, 0.8);
    width: 6.94rem;
    height: 0.7rem;
    background: rgba(2, 110, 207, 1);
    border-radius: 0.08rem;
    margin: 0 auto;
    padding: 0 0.2rem;

    .p1 {
      display: flex;
      // align-items: center;
      justify-content: flex-start;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .s1 {
      font-size: 0.28rem;
      margin-right: 0.2rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .s2,
    .s3 {
      font-size: 0.28rem;
      padding-right: 0.34rem;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #ffffff;
      background-image: url("../../assets/img/price/trendorigin.png");
      background-repeat: no-repeat;
      background-position: 99% center;
      background-size: 0.2rem;
    }
    .s3 {
      &.normal {
        background-image: none;
      }
      &.up {
        background-image: url("../../assets/img/price/trend-up.png");
        color: #ea4b4a;
      }
      &.down {
        background-image: url("../../assets/img/price/trend-down.png");
        color: #00cb79;
      }
    }
  }
}
.round {
  border-radius: 0.2rem;
  overflow: hidden;
  margin-top: -0.2rem;
}
.table-title {
  height: 0.8rem;
  line-height: 0.8rem;
  background: #ffffff;
  font-size: 0.28rem;
  text-align: center;
  color: #697274;
  border-bottom: 0.02rem solid rgba(236, 236, 237, 1);
}

.table-item {
  min-height: 1.08rem;
  padding: 0.2rem 0;
  padding: 0.4rem 0;
  text-align: center;
  color: rgba(39, 41, 55, 1);
  background: #ffffff;
  font-size: 0.26rem;
  line-height: 1.5;
  border-bottom: 0.02rem solid rgba(236, 236, 237, 1);
   table-layout: fixed;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: keep-all;
    word-wrap: break-word;
  td {
    position: relative;
    padding: 0.3rem 0;
    p {
      padding: 0 0.1rem;
    }

    &:last-child {
      width: 2rem;
    }
  }
  .guige {
    width: 30%;
    .p1 {
      font-size: 0.3rem;

      color: rgba(46, 80, 96, 1);
    }
    .p2 {
      font-size: 0.26rem;

      color: rgba(157, 169, 183, 1);
    }
  }
  .status-but {
    font-size: 0.24rem;
    background: rgba(243, 246, 249, 1);
    line-height: 0.4rem;
    position: relative;
    border-radius: 0.05rem;
    overflow: hidden;
    display: inline;
    padding: 0.05rem 0.2rem;
    color: rgba(105, 114, 116, 1);
  }
  &.table-item-down {
    .table-item-price {
      color: #37a10c;
    }
    .status-but {
      background: #00af49;
      color: #ffffff;
    }
  }
  &.table-item-up {
    .table-item-price {
      color: #d82d27;
    }
    .status-but {
      background: #d82d27;
      color: #ffffff;
    }
  }
}
</style>
